<template>
  <div class="AI-compare-report">
    <div class="ai-top-banner compare-top-banner">
      <div class="ai-banner-btns">
        <router-link to="/analysis/compare-class">
          <el-button class="no_border_img">授课对比</el-button>
        </router-link>
        <el-button class="h_border_img">授课对比报告</el-button>
        <router-view />
      </div>
    </div>
    <div class="report-export clear">
      <el-button class="fr" type="primary" size="medium" @click="getPdf()">导出</el-button>
    </div>
    <div class="compare-report-banner" id="pdfDom">
      <div class="report-tit">
        <h2>{{ lessonName1 }} 与 {{ lessonName2 }}&nbsp;&nbsp;&nbsp;授课对比报告</h2>
      </div>
      <div class="report-class-info">
        <span class="a_r_tit">一、课堂信息</span>
        <table class="report-class-table">
          <tr>
            <th>对比项目</th>
            <th>课程一</th>
            <th>课程二</th>
          </tr>
          <tr>
            <td>采样时间</td>
            <td>{{ checked_lessons[0].course_date }}</td>
            <td>{{ checked_lessons[1].course_date }}</td>
          </tr>
          <tr>
            <td>课程名称</td>
            <td>{{ lessonName1 }}</td>
            <td>{{ lessonName2 }}</td>
          </tr>
          <tr>
            <td>科目</td>
            <td>{{ lesson1.Subject }}</td>
            <td>{{ lesson2.Subject }}</td>
          </tr>
          <tr>
            <td>主讲人</td>
            <td>{{ lesson1.TchName }}</td>
            <td>{{ lesson2.TchName }}</td>
          </tr>
          <!-- <tr>
            <td>教材版本</td>
            <td>{{lesson1.BookVersion}}</td>
            <td>{{lesson2.BookVersion}}</td>
          </tr> -->
          <tr>
            <td>年级</td>
            <td>{{ lesson1.Grade }}</td>
            <td>{{ lesson2.Grade }}</td>
          </tr>
          <tr>
            <td>班级</td>
            <td>{{ lesson1.className }}</td>
            <td>{{ lesson2.className }}</td>
          </tr>
        </table>
      </div>
      <div class="action-compare">
        <span class="a_r_tit">二、教学行为对比</span>

        <!-- 教师行为 -->
        <table class="action-compare-table">
          <tr class="action-compare-tr">
            <td colspan="5">
              <div id="teacher-action-map" style="width: 998px; height: 420px"></div>
            </td>
          </tr>
          <tr>
            <th>对比课程/教师行为</th>
            <th>站立授课</th>
            <th>走动授课</th>
            <th>下讲台授课</th>
            <th>板书</th>
          </tr>
          <tr>
            <td class="compare-item">{{ lessonName1 }}</td>
            <td>{{ Math.round(BehaviorRecord1.Tch.StandOn) }}%</td>
            <td>{{ Math.round(BehaviorRecord1.Tch.Moving) }}%</td>
            <td>{{ Math.round(BehaviorRecord1.Tch.DownPlatform) }}%</td>
            <td>{{ Math.round(BehaviorRecord1.Tch.BlackBoard) }}%</td>
          </tr>
          <tr>
            <td class="compare-item">{{ lessonName2 }}</td>
            <td>{{ Math.round(BehaviorRecord2.Tch.StandOn) }}%</td>
            <td>{{ Math.round(BehaviorRecord2.Tch.Moving) }}%</td>
            <td>{{ Math.round(BehaviorRecord2.Tch.DownPlatform) }}%</td>
            <td>{{ Math.round(BehaviorRecord2.Tch.BlackBoard) }}%</td>
          </tr>
        </table>

        <!-- 学生行为 -->
        <table class="action-compare-table">
          <tr class="action-compare-tr">
            <td colspan="5">
              <div id="student-action-map" style="width: 998px; height: 420px"></div>
            </td>
          </tr>
          <tr>
            <th>对比学生行为</th>
            <th>站立授课</th>
            <th>走动授课</th>
            <th>下讲台授课</th>
            <th>板书</th>
          </tr>
          <tr>
            <td class="compare-item">{{ lessonName1 }}</td>
            <td>{{ Math.round(BehaviorRecord1.Tch.StandOn) }}%</td>
            <td>{{ Math.round(BehaviorRecord1.Tch.Moving) }}%</td>
            <td>{{ Math.round(BehaviorRecord1.Tch.DownPlatform) }}%</td>
            <td>{{ Math.round(BehaviorRecord1.Tch.BlackBoard) }}%</td>
          </tr>
          <tr>
            <td class="compare-item">{{ lessonName2 }}</td>
            <td>{{ Math.round(BehaviorRecord2.Tch.StandOn) }}%</td>
            <td>{{ Math.round(BehaviorRecord2.Tch.Moving) }}%</td>
            <td>{{ Math.round(BehaviorRecord2.Tch.DownPlatform) }}%</td>
            <td>{{ Math.round(BehaviorRecord2.Tch.BlackBoard) }}%</td>
          </tr>
        </table>

        <!-- 课程对比 -->
        <div class="ai_compare_container">
          <!-- 左边 -->
          <div class="ai_compare">
            <span>课程一</span>

            <div class="ai_participation">
              <span>平均课程参与度</span>
              <div class="percentage">90%</div>
            </div>

            <!-- 行为次数 -->
            <div class="ai_student_action">
              <span class="title">学生动作行为次数</span>
              <div class="action_box">
                <div class="action_count">
                  <span>820次</span>
                  <span>低头次数</span>
                </div>

                <div class="action_count">
                  <span>311次</span>
                  <span>抬头次数</span>
                </div>

                <div class="action_count">
                  <span>101次</span>
                  <span>转头次数</span>
                </div>

                <div class="action_count">
                  <span>121次</span>
                  <span>举手次数</span>
                </div>

                <div class="action_count">
                  <span>104次</span>
                  <span>站立次数</span>
                </div>

                <div class="action_count">
                  <span>115次</span>
                  <span>讨论次数</span>
                </div>
              </div>
            </div>

            <!-- 表情变化次数 -->
            <div class="ai_student_action">
              <span class="title">学生表情变化次数</span>
              <div class="action_box">
                <div class="action_count emo_count">
                  <span>820次</span>
                  <span>低头次数</span>
                </div>

                <div class="action_count emo_count">
                  <span>311次</span>
                  <span>抬头次数</span>
                </div>

                <div class="action_count emo_count">
                  <span>101次</span>
                  <span>转头次数</span>
                </div>

                <div class="action_count emo_count">
                  <span>121次</span>
                  <span>举手次数</span>
                </div>

                <div class="action_count emo_next_count">
                  <span>104次</span>
                  <span>站立次数</span>
                </div>

                <div class="action_count emo_next_count">
                  <span>115次</span>
                  <span>讨论次数</span>
                </div>

                <div class="action_count emo_next_count">
                  <span>115次</span>
                  <span>讨论次数</span>
                </div>
              </div>
            </div>

            <div style="width: 100%">
              <Behavior width="100%" :is-show-footer="true" title="学生行为分布"></Behavior>
            </div>

            <div style="width: 100%">
              <Behavior width="100%" title="教师教学行为分布"></Behavior>
            </div>
          </div>

          <!-- 右边 -->
          <div class="ai_compare">
            <span>课程二</span>

            <div class="ai_participation">
              <span>平均课程参与度</span>
              <div class="percentage">90%</div>
            </div>

            <!-- 行为次数 -->
            <div class="ai_student_action">
              <span class="title">学生动作行为次数</span>
              <div class="action_box">
                <div class="action_count">
                  <span>820次</span>
                  <span>低头次数</span>
                </div>

                <div class="action_count">
                  <span>311次</span>
                  <span>抬头次数</span>
                </div>

                <div class="action_count">
                  <span>101次</span>
                  <span>转头次数</span>
                </div>

                <div class="action_count">
                  <span>121次</span>
                  <span>举手次数</span>
                </div>

                <div class="action_count">
                  <span>104次</span>
                  <span>站立次数</span>
                </div>

                <div class="action_count">
                  <span>115次</span>
                  <span>讨论次数</span>
                </div>
              </div>
            </div>

            <!-- 表情变化次数 -->
            <div class="ai_student_action">
              <span class="title">学生表情变化次数</span>
              <div class="action_box">
                <div class="action_count emo_count">
                  <span>820次</span>
                  <span>低头次数</span>
                </div>

                <div class="action_count emo_count">
                  <span>311次</span>
                  <span>抬头次数</span>
                </div>

                <div class="action_count emo_count">
                  <span>101次</span>
                  <span>转头次数</span>
                </div>

                <div class="action_count emo_count">
                  <span>121次</span>
                  <span>举手次数</span>
                </div>

                <div class="action_count emo_next_count">
                  <span>104次</span>
                  <span>站立次数</span>
                </div>

                <div class="action_count emo_next_count">
                  <span>115次</span>
                  <span>讨论次数</span>
                </div>

                <div class="action_count emo_next_count">
                  <span>115次</span>
                  <span>讨论次数</span>
                </div>
              </div>
            </div>

            <div style="width: 100%">
              <Behavior width="100%" :is-show-footer="true" title="学生行为分布"></Behavior>
            </div>

            <div style="width: 100%">
              <Behavior width="100%" title="教师教学行为分布"></Behavior>
            </div>
          </div>
        </div>
      </div>
      <div class="report-record">
        <span class="a_r_tit">三、结构式课堂观察记录</span>
        <table class="record_class_table">
          <tr class="first-floor-th">
            <th class="bgc_b">对比项</th>
            <th>课程一</th>
            <th>课程二</th>
          </tr>
          <tr>
            <td class="bgc_b">观察时间</td>
            <td>{{ lesson1.courseDate }}</td>
            <td>{{ lesson2.courseDate }}</td>
          </tr>
          <tr>
            <td class="bgc_b">观察者</td>
            <td>教学AI数据分析系统</td>
            <td>教学AI数据分析系统</td>
          </tr>
          <tr>
            <td class="bgc_b">课程时长</td>
            <td>{{ timeToSec(lesson1.LessonLength) }}秒</td>
            <td>{{ timeToSec(lesson2.LessonLength) }}秒</td>
          </tr>
          <tr>
            <td class="bgc_b">采样间隔</td>
            <td>{{ Timestamp[1] - Timestamp[0] }}s</td>
            <td>{{ Timestamp[1] - Timestamp[0] }}s</td>
          </tr>
          <tr>
            <td class="scatter-tit" rowspan="3">参与度散点图</td>
            <td class="scatter-map-box" colspan="3">
              <div id="join-map" style="width: 100%; height: 100%"></div>
            </td>
          </tr>
          <tr class="scatter-data-tr">
            <td class="scatter-data-bx" colspan="2">
              <table class="join_data_table">
                <tr class="second-floor-th">
                  <th>课堂/s</th>
                  <template v-for="(item, index) of getTwentyVal(Timestamp, 1)">
                    <th :key="index">{{ item }}</th>
                  </template>
                </tr>
                <tr>
                  <td>{{ lessonName1 }}</td>
                  <template v-for="(item, index) of getTwentyVal(AvgJoinDegree1)">
                    <td :key="index">{{ item }}</td>
                  </template>
                </tr>
                <tr>
                  <td>{{ lessonName2 }}</td>
                  <template v-for="(item, index) of getTwentyVal(AvgJoinDegree2)">
                    <td :key="index">{{ item }}</td>
                  </template>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <!-- <el-button type="text">查看全部参与度数据</el-button> -->
            </td>
          </tr>
          <tr>
            <td class="teaching-model">教学模型</td>
            <td colspan="3">
              <div id="S-T-map" style="display: inline-block; width: 600px; height: 600px"></div>
              <div id="RT-CH-map" style="width: 100%; height: 380px"></div>
              <div class="mix-style">
                <span class="a_r_tit">RT - CH 模型标准模式</span>
                <table>
                  <tr>
                    <th>教学模式</th>
                    <th>练习型</th>
                    <th>混合型</th>
                    <th>对话型</th>
                    <th>讲授型</th>
                  </tr>
                  <tr>
                    <td>判断标准</td>
                    <td>Rt &le;0.3</td>
                    <td>Rt &ge;0.7</td>
                    <td>Ch &ge;0.4</td>
                    <td>0.3 &lt;Rt&le; 0.7,Ch&lt;0.4</td>
                  </tr>
                </table>
              </div>
            </td>
          </tr>
          <tr>
            <td>教学模型对比结果</td>
            <td colspan="3">
              <div class="mix-style-maps clear">
                <div class="action-box-tit fl">
                  {{ lessonName1 }}
                </div>
                <div class="action-box-r1 fl">
                  <div class="a-box-r1-l">
                    <span>学生行为</span>
                    <span>{{ Math.round(StuRate1 * 100) }}%</span>
                    <span>教师行为</span>
                    <span>{{ Math.round((1 - StuRate1) * 100) }}%</span>
                  </div>
                  <div id="rate-map1" style="display: inline-block; width: 50%; height: 100%"></div>
                </div>
                <div class="action-box-r2 fl">
                  <div class="a-box-r2-l">
                    <span>行为转化率</span>
                    <span>{{ Math.round(Ch1 * 100) }}%</span>
                  </div>
                  <div id="action-change-map1" style="display: inline-block; width: 50%; height: 100%"></div>
                </div>
                <div class="action-box-r3 fl">
                  <p>{{ ModelTypeData[ModelType1 - 1] }}</p>
                  <p>课堂类型</p>
                </div>
              </div>
              <div class="mix-style-maps clear">
                <div class="action-box-tit fl">
                  {{ lessonName2 }}
                </div>
                <div class="action-box-r1 fl">
                  <div class="a-box-r1-l">
                    <span>学生行为</span>
                    <span>{{ Math.round(StuRate2 * 100) }}%</span>
                    <span>教师行为</span>
                    <span>{{ Math.round((1 - StuRate2) * 100) }}%</span>
                  </div>
                  <div id="rate-map2" style="display: inline-block; width: 50%; height: 100%"></div>
                </div>
                <div class="action-box-r2 fl">
                  <div class="a-box-r2-l">
                    <span>行为转化率</span>
                    <span>{{ Math.round(Ch2 * 100) }}%</span>
                  </div>
                  <div id="action-change-map2" style="display: inline-block; width: 50%; height: 100%"></div>
                </div>
                <div class="action-box-r3 fl">
                  <p>{{ ModelTypeData[ModelType2 - 1] }}</p>
                  <p>课堂类型</p>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="class-type-tit">课堂类型结论</td>
            <td class="summary" colspan="3">
              <template>
                <!-- <el-input type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请输入结论" v-model="suggestion" maxlength="500">
                </el-input> -->
                <p class="hide-p4" contenteditable="true" @input="inputWord()" placeholder="请输入结论" ref="input3">{{ suggestion }}</p>
                <span class="numberWord">
                  <i>{{ suggestionLength }}</i>
                  <i>/500</i>
                </span>
              </template>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
const echarts = require("echarts/lib/echarts");
import Behavior from "../../ai/echart/behavior.vue";
require("echarts/lib/chart/map");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  data() {
    return {
      checked_lessons: null,
      lesson1: null,
      lesson2: null,
      lessonName1: null,
      lessonName2: null,
      htmlTitle: null,
      BehaviorRecord1: null,
      BehaviorRecord2: null,
      Timestamp: [],
      AvgJoinDegree1: null,
      AvgJoinDegree2: null,
      LessonModel1: null,
      LessonModel2: null,
      StuRate1: null,
      StuRate2: null,
      ModelType1: null,
      ModelType2: null,
      Ch1: null,
      Ch2: null,
      ModelTypeData: ["练习型", "混合型", "对话型", "讲授型"],
      traitData: [
        "课堂大部分时间用在学生做练习上，教师讲课和师生互动的教学环节稍有欠缺，课堂活跃度低。",
        "教师的各个授课环节安排很合理，既讲授了知识也通过师生互动的方式活跃了课堂气氛。",
        "教师主要通过问答的方式向学生授业，课堂活跃度高，但稍缺乏引导学生适量做题和教师授课知识的教学环节。",
        "课堂大部分时间用在教师讲课上，师生互动、学生学习等教学环节略有欠缺。"
      ],
      suggestion: "",
      suggestionLength: 0
    };
  },
  components: {
    Behavior
  },
  created() {
    this.getCompareData();
  },
  mounted() {
    //教师行为分析
    this.teacher_action_map();
    // 参与度散点图
    this.join_map();
    //S-T模型
    this.S_T_map();
    //RT-CH模型
    this.RT_CH_map();
    // 行为转化率
    this.rate_map();
    this.action_change_map();
  },
  methods: {
    inputWord() {
      this.suggestionLength = this.$refs.input3.innerText.length;
      if (this.suggestionLength > 500) {
        this.$refs.input3.innerText = this.$refs.input3.innerText.substr(0, 500);
        this.suggestionLength = 500;
        this.$message.error("结论不能超过500个字符");
      }
    },
    getCompareData() {
      // 从缓存里面读取数据：
      let checked_lessons = JSON.parse(sessionStorage.getItem("checked_lessons"));
      let lesson1 = JSON.parse(sessionStorage.getItem("lesson1"));
      let lesson2 = JSON.parse(sessionStorage.getItem("lesson2"));
      if (checked_lessons != undefined && lesson1 != undefined && lesson2 != undefined) {
        this.checked_lessons = checked_lessons;
        this.lesson1 = lesson1;
        this.lesson2 = lesson2;
        this.lessonName1 = checked_lessons[0].name;
        this.lessonName2 = checked_lessons[1].name;
        this.BehaviorRecord1 = lesson1.BehaviorRecord;
        this.BehaviorRecord2 = lesson2.BehaviorRecord;
        //导出文档的时候需要pdf文档名字
        this.htmlTitle = "《" + checked_lessons[0].name + "》" + "与" + "《" + checked_lessons[1].name + "》" + "对比报告";

        let tamp1 = lesson1.StuAvailableScore.Timestamp;
        let tamp2 = lesson2.StuAvailableScore.Timestamp;
        tamp1.length >= tamp2.length ? (this.Timestamp = tamp1) : (this.Timestamp = tamp2);

        this.AvgJoinDegree1 = lesson1.StuAvailableScore.AvgJoinDegree;
        this.AvgJoinDegree2 = lesson2.StuAvailableScore.AvgJoinDegree;
        this.LessonModel1 = lesson1.LessonModel;
        this.LessonModel2 = lesson2.LessonModel;
        this.StuRate1 = lesson1.LessonModel.StuRate;
        this.StuRate2 = lesson2.LessonModel.StuRate;

        this.ModelType1 = lesson1.LessonModel.ModelType;
        this.ModelType2 = lesson2.LessonModel.ModelType;
        this.Ch1 = lesson1.LessonModel.Ch;
        this.Ch2 = lesson2.LessonModel.Ch;

        // 2个课程对比结论：
        if (this.ModelType1 == this.ModelType2) {
          this.suggestion =
            "【" +
            this.lessonName1 +
            "-" +
            this.lesson1.TchName +
            "】课堂的教师行为占课堂总行为的" +
            Math.round((1 - this.StuRate1) * 100) +
            "%，教师行为和学生行为间的相互转化率为" +
            Math.round(this.Ch1 * 100) +
            "% ;" +
            "【" +
            this.lessonName2 +
            "-" +
            this.lesson2.TchName +
            "】课堂的教师行为占课堂总行为的" +
            Math.round((1 - this.StuRate2) * 100) +
            "%，教师行为和学生行为间的相互转化率为" +
            Math.round(this.Ch2 * 100) +
            "% ;两个课堂均属于" +
            this.ModelTypeData[this.ModelType1 - 1] +
            "，都具有以下特点：" +
            this.traitData[this.ModelType1 - 1];
        } else {
          this.suggestion =
            "【" +
            this.lessonName1 +
            "-" +
            this.lesson1.TchName +
            "】课堂的教师行为占课堂总行为的" +
            Math.round((1 - this.StuRate1) * 100) +
            "%，教师行为和学生行为间的相互转化率为" +
            Math.round(this.Ch1 * 100) +
            "% ,课堂类型属于" +
            this.ModelTypeData[this.ModelType1 - 1] +
            ";" +
            "【" +
            this.lessonName2 +
            "-" +
            this.lesson2.TchName +
            "】课堂的教师行为占课堂总行为的" +
            Math.round((1 - this.StuRate2) * 100) +
            "%，教师行为和学生行为间的相互转化率为" +
            Math.round(this.Ch2 * 100) +
            "% ,课堂类型属于" +
            this.ModelTypeData[this.ModelType2 - 1] +
            ";两课堂相比，" +
            "【" +
            this.lessonName1 +
            "】" +
            "的" +
            this.traitData[this.ModelType1 - 1] +
            "【" +
            this.lessonName2 +
            "】" +
            "的" +
            this.traitData[this.ModelType2 - 1];
        }
        this.suggestionLength = this.suggestion.length;
      } else {
        this.$router.go(-1);
      }
    },
    // 抽取数组里面的20个值
    getTwentyVal(arr, num) {
      let _length = this.Timestamp.length;
      // 根据时间轴的长度
      if (_length <= 20) {
        return arr;
      } else {
        let ratio = _length / 20;
        let array = [];
        for (var i = 0; i < 20; i++) {
          let inx = Math.ceil(ratio) * i;
          if (inx < arr.length) {
            array.push(arr[inx]);
          }
        }
        return array;
      }
    },
    timeToSec(time) {
      var hour = parseInt(time.split(":")[0]);
      var min = parseInt(time.split(":")[1]);
      var sec = parseInt(time.split(":")[2]);
      var s = Number(hour * 3600) + Number(min * 60) + Number(sec);
      return s;
    },
    teacher_action_map() {
      let _value1 = [
        this.BehaviorRecord1.Tch.Moving.toFixed(2),
        this.BehaviorRecord1.Tch.StandOn.toFixed(2),
        this.BehaviorRecord1.Tch.DownPlatform.toFixed(2),
        this.BehaviorRecord1.Tch.BlackBoard.toFixed(2)
      ];
      let _value2 = [
        this.BehaviorRecord2.Tch.Moving.toFixed(2),
        this.BehaviorRecord2.Tch.StandOn.toFixed(2),
        this.BehaviorRecord2.Tch.DownPlatform.toFixed(2),
        this.BehaviorRecord2.Tch.BlackBoard.toFixed(2)
      ];
      let _value = deep_clone(_value1).concat(deep_clone(_value2));
      let maxVal = Math.max.apply(null, _value) == 0 ? 100 : Math.max.apply(null, _value); //雷达图最大值
      let myChart = echarts.init(document.getElementById("teacher-action-map"));
      myChart.setOption({
        color: ["#FEA900", "#22D7FF"],
        legend: {
          show: true,
          bottom: 10,
          center: 0,
          textStyle: {
            fontSize: 14,
            color: "#000"
          },
          data: [this.lessonName1, this.lessonName2]
        },
        tooltip: {
          trigger: "item"
        },
        radar: [
          {
            indicator: [
              {
                text: "走动讲课",
                max: maxVal
              },
              {
                text: "站立授课",
                max: maxVal
              },
              {
                text: "下讲台授课",
                max: maxVal
              },
              {
                text: "板书",
                max: maxVal
              }
            ],
            center: ["50%", "50%"],
            radius: 142,
            startAngle: 90,
            splitNumber: 3,
            orient: "horizontal", // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.
            name: {
              formatter: "{value}",
              textStyle: {
                fontSize: 14, //外圈标签字体大小
                color: "#000" //外圈标签字体颜色
              }
            },
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ["transparent", "transparent"] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              }
            },
            axisLine: {
              //指向外圈文本的分隔线样式
              lineStyle: {
                color: "#ccc"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#ccc", // 分隔线颜色
                width: 1 // 分隔线线宽
              }
            }
          }
        ],
        series: [
          {
            name: "教师行为分析",
            type: "radar",
            itemStyle: {
              emphasis: {
                lineStyle: {
                  width: 4
                }
              }
            },
            data: [
              {
                name: this.lessonName1,
                value: _value1,
                symbolSize: 0, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                areaStyle: {
                  normal: {
                    // 单项区域填充样式
                    color: "#FEA900"
                  }
                }
              },
              {
                name: this.lessonName2,
                value: _value2,
                symbolSize: 0,
                areaStyle: {
                  normal: {
                    color: "#22D7FF"
                  }
                }
              }
            ]
          }
        ]
      });

      // 学生
      let stuChart = echarts.init(document.getElementById("student-action-map"));
      stuChart.setOption({
        color: ["#FEA900", "#22D7FF"],
        legend: {
          show: true,
          bottom: 10,
          center: 0,
          textStyle: {
            fontSize: 14,
            color: "#000"
          },
          data: [this.lessonName1, this.lessonName2]
        },
        tooltip: {
          trigger: "item"
        },
        radar: [
          {
            indicator: [
              {
                text: "听课时长",
                max: maxVal
              },
              {
                text: "实践时长",
                max: maxVal
              },
              {
                text: "讨论时长",
                max: maxVal
              },
              {
                text: "阅读时长",
                max: maxVal
              }
            ],
            center: ["50%", "50%"],
            radius: 142,
            startAngle: 90,
            splitNumber: 3,
            orient: "horizontal", // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.
            name: {
              formatter: "{value}",
              textStyle: {
                fontSize: 14, //外圈标签字体大小
                color: "#000" //外圈标签字体颜色
              }
            },
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ["transparent", "transparent"] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              }
            },
            axisLine: {
              //指向外圈文本的分隔线样式
              lineStyle: {
                color: "#ccc"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#ccc", // 分隔线颜色
                width: 1 // 分隔线线宽
              }
            }
          }
        ],
        series: [
          {
            name: "教师行为分析",
            type: "radar",
            itemStyle: {
              emphasis: {
                lineStyle: {
                  width: 4
                }
              }
            },
            data: [
              {
                name: this.lessonName1,
                value: _value1,
                symbolSize: 0, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                areaStyle: {
                  normal: {
                    // 单项区域填充样式
                    color: "#FEA900"
                  }
                }
              },
              {
                name: this.lessonName2,
                value: _value2,
                symbolSize: 0,
                areaStyle: {
                  normal: {
                    color: "#22D7FF"
                  }
                }
              }
            ]
          }
        ]
      });
    },
    join_map() {
      let myChart = echarts.init(document.getElementById("join-map"));
      myChart.setOption({
        legend: {
          show: true,
          bottom: 10,
          center: 0,
          textStyle: {
            fontSize: 14,
            color: "#000"
          },
          data: [this.lessonName1, this.lessonName2]
        },
        tooltip: {
          trigger: "axis",
          label: {
            show: true
          }
        },
        xAxis: {
          name: "时间/s",
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: "#000",
              width: 1
            }
          },
          data: this.Timestamp
        },
        yAxis: {
          name: "参与度/%",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#ddd"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#000",
              width: 1
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: "transparent"
            }
          },
          max: 100
        },
        series: [
          {
            name: this.lessonName1,
            type: "line",
            showSymbol: false,
            hoverAnimation: false,
            symbolSize: 7,
            lineStyle: {
              color: "#FFD402"
            },
            itemStyle: {
              color: "#FFD402",
              borderWidth: 1,
              borderColor: "#FFD402"
            },
            data: this.AvgJoinDegree1
          },
          {
            name: this.lessonName2,
            type: "line",
            showSymbol: false,
            hoverAnimation: false,
            symbolSize: 7,
            lineStyle: {
              color: "#3DE2FF"
            },
            itemStyle: {
              color: "#3DE2FF",
              borderWidth: 1,
              borderColor: "#3DE2FF"
            },
            data: this.AvgJoinDegree2
          }
        ]
      });
    },
    S_T_map() {
      let myChart = echarts.init(document.getElementById("S-T-map"));
      let show_data1 = this.LessonModel1.ST_Value == undefined ? [] : this.LessonModel1.ST_Value;
      let show_data2 = this.LessonModel2.ST_Value == undefined ? [] : this.LessonModel2.ST_Value;
      let _max1 = show_data1[show_data1.length - 1];
      let _max2 = show_data2[show_data2.length - 1];
      let _max = _max1 >= _max2 ? _max1 : _max2;
      let x_value = [];
      for (var i = 0; i < _max; i++) {
        x_value.push(i);
      }
      myChart.setOption({
        title: {
          text: "S-T模型",
          left: "center"
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          name: "T",
          nameLocation: "end",
          type: "category",
          boundaryGap: false,
          splitNumber: 5,
          max: _max,
          min: 0,
          data: x_value,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#ddd"
            }
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          }
          // axisLine: {
          //   lineStyle: {
          //     color: "#000",
          //     width: 1
          //   }
          // },
        },
        yAxis: {
          name: "S",
          nameLocation: "end",
          max: _max,
          splitNumber: 5,
          min: 0,
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#ddd"
            }
          },
          axisTick: {
            show: false
          },
          // axisLine: {
          //   lineStyle: {
          //     color: "#000",
          //     width: 1
          //   }
          // },
          splitArea: {
            show: true,
            areaStyle: {
              color: "transparent"
            }
          }
        },
        series: [
          {
            name: this.lessonName1,
            type: "line",
            step: "end",
            lineStyle: {
              color: "#FFD402"
            },
            itemStyle: {
              color: "#FFD402",
              borderWidth: 1,
              borderColor: "#FFD402"
            },
            data: show_data1
          },
          {
            name: this.lessonName2,
            type: "line",
            step: "end",
            lineStyle: {
              color: "#3DE2FF"
            },
            itemStyle: {
              color: "#3DE2FF",
              borderWidth: 1,
              borderColor: "#3DE2FF"
            },
            data: show_data2
          }
        ]
      });
    },
    RT_CH_map() {
      let myChart = echarts.init(document.getElementById("RT-CH-map"));
      myChart.setOption({
        title: {
          text: "RT-CH模型",
          left: "center"
        },
        grid: {
          left: "20%",
          right: "20%",
          bottom: "10%",
          containLabel: true
        },
        tooltip: {
          trigger: "item", //触发：散点类用item，柱形之类的坐标轴触发用axis。trigger：item对应type：scatter/effectScatter；trigger：axis对应type：line
          axisPointer: {
            type: "effectScatter" //这里只有hover在辐射点之上才触发
          },
          formatter: function (param) {
            //显示框自定义
            return (
              '<p style="display:flex;justify-content:space-between"><span>CH值 :</span> ' +
              "<span>" +
              param.data[1].toFixed(2) +
              "</span>" +
              "</p>" +
              '<p style="display:flex;justify-content:space-between"><span>RT值 :</span> ' +
              "<span>" +
              param.data[0].toFixed(2) +
              "</span>" +
              "</p>"
            );
          }
        },
        xAxis: {
          name: "RT",
          //隐藏方格线
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: "CH",
          splitLine: {
            show: false
          }
        },
        series: [
          // 提示点
          {
            type: "effectScatter",
            symbolSize: 8,
            data: [[this.LessonModel1.Rt, this.LessonModel1.Ch]],
            color: "#FEA900"
          },
          {
            type: "effectScatter",
            symbolSize: 8,
            data: [[this.LessonModel2.Rt, this.LessonModel2.Ch]],
            color: "#22D7FF"
          },
          //线
          {
            data: [
              [0, 0],
              [0.5, 1],
              [1, 0]
            ],
            type: "line",
            symbol: "none", // 去掉线的拐点
            color: "#979797"
          },
          {
            data: [
              [0.2, 0.4],
              [0.8, 0.4]
            ],
            type: "line",
            symbol: "none",
            color: "#979797"
          },
          {
            data: [
              [0.3, 0],
              [0.3, 0.6]
            ],
            type: "line",
            symbol: "none",
            color: "#979797"
          },
          {
            data: [
              [0.7, 0],
              [0.7, 0.6]
            ],
            type: "line",
            symbol: "none",
            color: "#979797"
          },
          // 标注文字
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.44, 0.6]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["对话型"].join("\n"),
                fontSize: 14,
                color: "#000"
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.13, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["练习型"].join("\n"),
                fontSize: 14,
                color: "#000"
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.44, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["混合型"].join("\n"),
                fontSize: 14,
                color: "#000"
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.74, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["讲授型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#000"
              }
            }
          }
        ]
      });
    },
    rate_map() {
      let myChart1 = echarts.init(document.getElementById("rate-map1"));
      let myChart2 = echarts.init(document.getElementById("rate-map2"));
      myChart1.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}:{d}%"
        },
        series: [
          {
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            color: ["#08A8FF", "#08FCFF"],
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            data: [
              { value: this.StuRate1.toFixed(2) * 100, name: "学生行为" },
              { value: (1 - this.StuRate1).toFixed(2) * 100, name: "教师行为" }
            ]
          }
        ]
      });
      myChart2.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}:{d}%"
        },
        series: [
          {
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            color: ["#08A8FF", "#08FCFF"],
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            data: [
              { value: (this.StuRate2 * 100).toFixed(1), name: "学生行为" },
              {
                value: ((1 - this.StuRate2) * 100).toFixed(1),
                name: "教师行为"
              }
            ]
          }
        ]
      });
    },
    action_change_map() {
      let myChart1 = echarts.init(document.getElementById("action-change-map1"));
      let myChart2 = echarts.init(document.getElementById("action-change-map2"));
      myChart1.setOption({
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            color: ["#F0D600", "#00145A"],
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },

            data: [{ value: this.Ch1 }, { value: 1 - this.Ch1 }]
          }
        ]
      });
      myChart2.setOption({
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            color: ["#F0D600", "#00145A"],
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },

            data: [{ value: this.Ch2 }, { value: 1 - this.Ch2 }]
          }
        ]
      });
    }
  }
};
</script>
<style lang="scss">
.AI-report {
  #teacher-action-map {
    display: inline-block;
    margin: 0 auto;
  }
  .bgc_b {
    background-color: #eaf5ff;
  }
}

.ai_compare_container {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;

  .ai_compare {
    display: flex;
    flex-direction: column;
    align-items: center;

    .ai_participation {
      margin: 15px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      font-size: 14px;
      height: 150px;
      width: 450px;
      border: 1px solid #666;
      border-radius: 20px;

      .percentage {
        font-size: 35px;
        font-weight: bold;
      }
    }

    .ai_student_action {
      width: 450px;
      height: 150px;
      border: 1px solid #666;
      border-radius: 20px;
      padding: 20px;
      box-sizing: border-box;
      margin-bottom: 15px;

      .action_box {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;

        .action_count {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 33%;
          margin-bottom: 10px;
          span {
            margin: 5px 0;
          }
        }

        .emo_count {
          width: 25%;
        }

        .emo_next_count {
          width: 33%;
        }
      }
    }
  }
}

.title {
  font-weight: bold;
}
</style>
